<template>
  <div class="rish_trend_page_class">
    <div class="shadow_bg_class"
         v-show="riskReasons"
         style="width: 100%;color: #ffffff;padding: 12px ">
      <span><em style="font-weight: bold;font-style: normal">危险原因 : </em>{{riskReasons}}</span>

    </div>
    <div class="shadow_bg_class"
         v-show="riskMeasures"
         style="width: 100%;color: #ffffff;padding: 12px;margin-top: 8px ">
      <span><em style="font-weight: bold;font-style: normal">解决措施 : </em>{{riskMeasures}}</span>
    </div>

    <div class="shadow_bg_class"
         style="width: 100%;color: #ffffff;padding: 12px;margin-top: 8px ">
      <el-form ref="filters" :model="filters" label-width="100px">
        <el-row :gutter="20" style="margin-bottom: 0px">
          <el-col :span="6">
            <el-form-item label="风险点：" style="margin-bottom: 0 !important;">
              <el-select v-model="filters.positionId" placeholder="请选择" @change="handleRiskPosition" clearable>
                <el-option
                    v-for="item in riskPositionOptions"
                    :key="item.id"
                    :label="item.riskPosition"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维度：" style="margin-bottom: 0 !important;">
              <el-select v-model="filters.dimension" placeholder="请选择" clearable>
                <el-option
                    v-for="item in dimensionOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6" v-show="filters.dimension=='year'">
            <el-form-item label="年：" style="margin-bottom: 0 !important;">
              <el-date-picker
                  v-model="filters.year"
                  type="year"
                  @change="handleSearchByYear"
                  value-format="yyyy"
                  placeholder="选择年">
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="6" v-show="filters.dimension=='month'">
            <el-form-item label="月：" style="margin-bottom: 0 !important;">
              <el-date-picker
                  v-model="filters.month"
                  @change="handleSearchByMonth"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="选择月">
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="6" v-show="filters.dimension=='day'">
            <el-form-item label="天：" style="margin-bottom: 0 !important;">
              <el-date-picker
                  v-model="filters.day"
                  type="date"
                  @change="handleSearchByDay"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="display: flex;justify-content: flex-end">
            <el-button type="primary"
                       style="background: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.18);"
                       @click="handleReport">导出报表
            </el-button>

          </el-col>
        </el-row>

      </el-form>
    </div>
    <div  id="container" :style="containerStyleObject" class="shadow_bg_class">
    </div>
    <div  id="containerOne" :style="containerOneStyleObject" class="shadow_bg_class">
    </div>
    <div  id="containerTwo" :style="containerTwoStyleObject" class="shadow_bg_class">
    </div>


  </div>

</template>

<script>
import rish_trend_report_page_bus from './rish_trend_report_page_bus.js'

export default rish_trend_report_page_bus

</script>
<style>
.rish_trend_page_class {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
